<template>
  <el-container
    v-loading="loading"
    class="container2"
    :style="{ backgroundImage: 'url(' + require('@/assets/bg1.jpg') + ')' }"
  >
    <el-header class="title">
      <div class="t-left">
        <img src="@/assets/logo1.png" alt="" />
        <span class="wenzi">乡村规划编制管理系统</span>
      </div>
      <div class="t-right">
        <img src="@/assets/shezhi.png" alt="" /><img
          src="@/assets/zhuyi.png"
          alt=""
        /></div
    ></el-header>
    <el-main class="emain">
      <div class="centerWrap">
        <div class="formTitle">编制单位注册</div>
        <el-form ref="form" :model="regiForm" :rules="rules" class="regiForm">
          <div class="formleft">
            <el-form-item prop="nickName" :required="true">
              <div>请输入单位名称</div>
              <el-input v-model="regiForm.nickName" />
            </el-form-item>
            <el-form-item prop="username" :required="true">
              <div>请输入用户名</div>
              <el-input v-model="regiForm.username" />
            </el-form-item>
            <el-form-item prop="password" :required="true">
              <div>请输入密码</div>
              <el-input v-model="regiForm.password" show-password clearable />
            </el-form-item>
            <el-form-item prop="confirmPwd" :required="true">
              <div>确认密码</div>
              <el-input v-model="regiForm.confirmPwd" show-password clearable />
            </el-form-item>
            <!-- <el-form-item prop="contactName" :required="true">
              <div>请输入联系人</div>
              <el-input v-model="regiForm.contactName" />
            </el-form-item> -->
            <el-form-item prop="contactPhone" :required="true">
              <div>请输入联系方式</div>
              <el-input v-model="regiForm.contactPhone" />
            </el-form-item>
          </div>
          <div class="formright">
            <el-form-item prop="qualificationLevel" :required="true">
              <div>请选择资质等级</div>
              <el-select
                v-model="regiForm.qualificationLevel"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in unittype"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <div class="warn">
              <div class="zhuyi">
                <img src="@/assets/zhuyi1.png" /><span>注意事项：</span>
              </div>
              <p>支持上传图片格式文件，请确保图片文字清晰便于审核。</p>
              <p>（支持格式JPG、BMP、PNG、GIF的图片）</p>
            </div>
            <div class="upimg">
              <el-form-item>
                <el-upload
                  class="upload-demo"
                  ref="qualification"
                  action=""
                  multiple
                  :limit="2"
                  :http-request="qualificationFileSubmit"
                >
                  <div class="upload">
                    <i class="el-icon-plus" /><span>单位资质上传</span>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-upload
                  class="upload-demo"
                  ref="agreement"
                  action=""
                  multiple
                  :limit="2"
                  :http-request="agreementFileSubmit"
                >
                  <div class="upload">
                    <i class="el-icon-plus" /><span>中标文件上传</span>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-upload
                  class="upload-demo"
                  ref="nda"
                  action=""
                  multiple
                  :limit="2"
                  :http-request="ndaFileSubmit"
                >
                  <div class="upload">
                    <i class="el-icon-plus" /><span>保密协议上传</span>
                  </div>
                </el-upload>
              </el-form-item>
            </div>
          </div>
        </el-form>

        <div class="buttonGroup">
          <el-button type="primary" class="ebutton" @click="send"
            >提交</el-button
          >
          <el-button type="info" plain class="ebutton" @click="back"
            >返回</el-button
          >
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { isvalidPhone } from "@/utils/validate";
import { register, getqualificationlist } from "@/api/shenhe";

export default {
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.regiForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const validFiles = (rule, value, callback) => {
      // array.forEach((element) => {});
      if (value.length == 0) {
        callback(new Error(rule.message));
      } else {
        callback();
      }
    };
    return {
      fileList: [],
      fileList1: [],
      fileList2: [],
      loading: false,
      unittype: [],
      regiForm: {
        nickName: "",
        username: "",
        password: "",
        confirmPwd: "",
        contactName: "",
        contactPhone: "",
        qualificationLevel: "",
        qualificationFiles: [],
        agreementFiles: [],
        ndaFiles: [],
      },
      rules: {
        nickName: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          { required: true, message: "请输入单位名称", trigger: "change" },
          {
            min: 2,
            max: 40,
            message: "长度在 2 到 40 个字符",
            trigger: "blur",
          },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          // {
          //   required: true,
          //   message: "密码必须包含大小写字母、数字、特殊符号",
          //   trigger: "change",
          // },
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          //   { min: 8, max: 30, message: "长度 8-30 个字符", trigger: "change" },
          //   {
          //     pattern: /^[!@#$%^&*_+=~\w]{8,30}$/,
          //     message: "只能输入8-30个字母、数字、下划线",
          //   },
          //   { pattern: /[!@#$%^&*_+=~]/, message: "必须有一个特殊符号" },
          //   { pattern: /\d/, message: "必须有一个数字" },
          //   { pattern: /[a-z]/, message: "必须有一个小写字母" },
          //   { pattern: /[A-Z]/, message: "必须有一个大写字母" },
          // ],
          // confirmPwd: [
          //   {
          //     required: true,
          //     message: "密码必须包含大小写字母、数字、特殊符号",
          //     trigger: "change",
          //   },
          //   { min: 8, max: 30, message: "长度 8-30 个字符", trigger: "change" },
          //   { validator: validatePass2, trigger: "blur", required: true },
          //   {
          //     pattern: /^[!@#$%^&*_+=~\w]{8,30}$/,
          //     message: "只能输入8-30个字母、数字、下划线",
          //   },
          //   { pattern: /[!@#$%^&*_+=~]/, message: "必须有一个特殊符号" },
          //   { pattern: /\d/, message: "必须有一个数字" },
          //   { pattern: /[a-z]/, message: "必须有一个小写字母" },
          //   { pattern: /[A-Z]/, message: "必须有一个大写字母" },
        ],
        // contactName: [
        //   { required: true, message: "请输入联系人", trigger: "blur" },
        // ],
        contactPhone: [
          { required: true, trigger: "blur", validator: validPhone },
        ],
        qualificationLevel: [
          { required: true, trigger: "blur", message: "请选择资质等级" },
        ],
        qualificationFiles: [
          {
            required: false,
            trigger: "blur",
            message: "请上传资质文件",
            validator: validFiles,
          },
        ],
        agreementFiles: [
          {
            required: false,
            trigger: "blur",
            message: "请上传中标文件",
            validator: validFiles,
          },
        ],
        ndaFiles: [
          {
            required: false,
            trigger: "blur",
            message: "请上传保密协议",
            validator: validFiles,
          },
        ],
      },
    };
  },
  mounted() {
    this.getunittype();
  },
  methods: {
    back() {
      this.$router.push("/");
    },
    async getunittype() {
      let res = await getqualificationlist();
      this.unittype = res.data.filter(function (s) {
        return s && s.trim();
      });
    },
    fileSubmit(data) {},
    ndaFileSubmit(data) {
      this.regiForm.ndaFiles.push(data.file);
    },
    agreementFileSubmit(data) {
      this.regiForm.agreementFiles.push(data.file);
    },
    qualificationFileSubmit(data) {
      this.regiForm.qualificationFiles.push(data.file);
    },
    send() {
      this.regiForm.qualificationFiles = [];
      this.regiForm.agreementFiles = [];
      this.regiForm.ndaFiles = [];
      this.$refs.nda.submit();
      this.$refs.qualification.submit();
      this.$refs.agreement.submit();
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return;
        } else {
          let formData = new FormData();
          let regiForm = this.regiForm;
          for (let i in regiForm) {
            if (regiForm[i].constructor == Array) {
              regiForm[i].forEach((v) => {
                formData.append(i, v);
              });
            } else {
              formData.append(i, regiForm[i]);
            }
          }
          this.loading = true;
          register(formData)
            .then((res) => {
              if (res.success == true) {
                // 否则全部重定向到登录页
                this.$notify({
                  title: "成功",
                  message: "注册成功,请返回登录页面登录",
                  type: "success",
                  duration: 0,
                });
                this.$router.push("/login?");
              } else {
                this.$notify.error({
                  title: "发生错误",
                  message: res.message,
                  duration: 0,
                });
                alert(res.message);
              }
              this.loading = false;
            })
            .catch((e) => {
              this.$notify({
                title: "注册失败",
                message: e.response.data.message,
                duration: 0,
              });
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.container2 {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  .emain {
    .centerWrap {
      position: absolute;
      width: 866px;
      height: 600px;
      padding: 10px;
      top: 50%;
      left: 50%;
      z-index: 10;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.5);
      border: 1px solid #ccc;
      border-radius: 6px;
      .formTitle {
        margin: 10px 20px;
        padding-bottom: 10px;
        font-size: 25px;
        font-weight: 500;
        color: #4778c7;
        border-bottom: 1px solid #4778c7;
      }
      .buttonGroup {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        .ebutton {
          width: 140px;
          height: 50px;
          border-radius: 6px;
          margin-right: 15px;
        }
      }
      .regiForm {
        width: 100%;
        display: flex;
        height: 455px;
        overflow-y: auto;
        overflow-x: hidden;
        justify-content: space-between;
      }
      .regiForm::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
      }
      .regiForm::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
      }
      .regiForm::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
      }
    }
    .formleft {
      width: 50%;
      padding: 20px;
    }
    .formright {
      width: 50%;
      padding: 20px;
      .warn {
        font-size: 14px;
        p {
          color: red;
        }
        .zhuyi {
          display: flex;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
          }
          span {
            font-size: 16px;
            margin-left: 5px;
          }
        }
      }
      .upload-demo {
        width: 100%;
        div {
          width: 100%;
        }
      }
      .upload {
        border: 1px solid #ccc;
        font-size: 14px;
        border-radius: 4px;
        span {
          margin-left: 5px;
        }
      }
      .ultext {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0;
        li {
          display: flex;
          align-items: center;
          font-size: 12px;
          margin-right: 10px;
          padding-right: 10px;
          border-right: 1px solid #ccc;
          i {
            margin-left: 3px;
            color: #4778c7;
          }
        }
        li:last-child {
          border-right: none;
        }
      }
      .box {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        .imgbox {
          width: 40%;
          float: left;
          border: 1px solid #ccc;
          border-radius: 6px;
          line-height: 185px;
          text-align: center;
          font-size: 25px;
          font-weight: 700;
        }
      }
    }
  }
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #4778c7;
  color: #fff;
  line-height: 80px;
  align-content: center;
  .t-left {
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
  }

  .wenzi {
    color: #fff;
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: 700;
  }
  img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
</style>
